<div local-class='project-settings-integrations'>
  <ProjectSettings::Title @title={{t 'components.project_settings.integrations.title'}} />

  {{#if (get @permissions 'create_project_integration')}}
    <button
      local-class='toggleCreateFormButton'
      class='button button--iconOnly {{if this.showCreateForm "button--filled button--white" "button--filled"}}'
      {{on 'click' (fn this.toggleCreateForm)}}
    >
      {{#if this.showCreateForm}}
        {{inline-svg '/assets/x.svg' class='button-icon'}}
      {{else}}
        {{inline-svg '/assets/add.svg' class='button-icon'}}
      {{/if}}
    </button>
  {{/if}}

  <p local-class='help'>
    {{{t 'components.project_settings.integrations.help'}}}
  </p>

  {{#if this.showCreateForm}}
    <div local-class='createForm'>
      <ProjectSettings::Integrations::Form
        @project={{@project}}
        @selectedServiceValue={{this.selectedServiceValue}}
        @onCancel={{fn this.toggleCreateForm}}
        @onSubmit={{fn this.create}}
      />
    </div>
  {{/if}}

  {{#if this.showEmptyDescription}}
    <div local-class='empty-description'>
      <button local-class='empty-description-item' {{on 'click' (fn this.toggleCreateForm 'AZURE_STORAGE_CONTAINER')}}>
        {{inline-svg 'assets/services/azure.svg' local-class='empty-description-icon'}}
        <strong>{{t 'components.project_settings.integrations.empty_description.azure_storage_container.title'}}</strong>
        <p>{{t 'components.project_settings.integrations.empty_description.azure_storage_container.text'}}</p>
      </button>

      <button local-class='empty-description-item' {{on 'click' (fn this.toggleCreateForm 'AWS_S3')}}>
        {{inline-svg 'assets/services/aws-s3.svg' local-class='empty-description-icon'}}
        <strong>{{t 'components.project_settings.integrations.empty_description.aws_s3.title'}}</strong>
        <p>{{t 'components.project_settings.integrations.empty_description.aws_s3.text'}}</p>
      </button>

      <button local-class='empty-description-item' {{on 'click' (fn this.toggleCreateForm 'SLACK')}}>
        {{inline-svg 'assets/services/slack.svg' local-class='empty-description-icon'}}
        <strong>{{t 'components.project_settings.integrations.empty_description.slack.title'}}</strong>
        <p>{{t 'components.project_settings.integrations.empty_description.slack.text'}}</p>
      </button>

      <button local-class='empty-description-item' {{on 'click' (fn this.toggleCreateForm 'DISCORD')}}>
        {{inline-svg 'assets/services/discord.svg' local-class='empty-description-icon'}}
        <strong>{{t 'components.project_settings.integrations.empty_description.discord.title'}}</strong>
        <p>{{t 'components.project_settings.integrations.empty_description.discord.text'}}</p>
      </button>
    </div>
  {{/if}}

  <ProjectSettings::Integrations::List
    @permissions={{@permissions}}
    @project={{@project}}
    @integrations={{@project.integrations}}
    @onUpdate={{@onUpdateIntegration}}
    @onDelete={{@onDeleteIntegration}}
  />
</div>